<script lang="ts" setup>
import type { HookType } from '../../types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenModal } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPluginHooks } from '#/api/admin/plugins';
import Icon from '#/components/Icons';

import HooksPluginsModalView from './HooksPluginsModal.vue';

const types: any = {
  '1': '系统钩子',
  '2': '应用钩子',
  '3': '模板钩子',
  '4': '后台模板钩子',
};
const pluginId = ref();
const gridOptions: VxeGridProps<HookType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'name', title: '名称' },
    { field: 'type', title: '类型', slots: { default: 'type' } },
    { field: 'once', title: '执行插件', slots: { default: 'once' } },
    { field: 'description', title: '描述' },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        const { data } = await getPluginHooks(pluginId.value);
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
});

const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen) {
    if (isOpen) {
      const modalData = modalApi.getData();
      pluginId.value = modalData.row.id;
    }
  },
});

const [HooksPluginsModal, HooksPluginsModalApi] = useVbenModal({
  connectedComponent: HooksPluginsModalView,
});

/** 打开钩子插件排序列表窗口 */
const handleOpenHooksModel = async (row: any) => {
  HooksPluginsModalApi.setState({
    title: `${row.name}-插件排序`,
  });
  HooksPluginsModalApi.setData(row);
  HooksPluginsModalApi.open();
};
</script>
<template>
  <Modal :footer="false" class="w-3/5">
    <HooksPluginsModal />
    <Grid table-title="钩子列表">
      <template #type="{ row }">
        {{ types[row.type] }}
      </template>
      <template #once="{ row }">
        {{ row.once ? '首个插件' : '多个插件' }}
      </template>
      <template #action="{ row }">
        <Button type="primary" @click="handleOpenHooksModel(row)">
          <template #icon>
            <span class="anticon">
              <Icon icon="ri:list-ordered" />
            </span>
          </template>
          排序
        </Button>
      </template>
    </Grid>
  </Modal>
</template>
